<template>
	<div class="cheap_main" :class="[1===nowIndex ? changecolor : '']">
		<div class="top" >
			<img :src="info.list_url">
		</div>
		
		<div class="title">
			<span>{{info.name}}</span> 
		</div>

		<div class="list">
          	<div class="item" v-for="(item,index) in dataList" :key="index"
          	@click="goodsDetail(item.id)">
          		<img :src="item.list_pic_url" alt="">
	          	<div class="p">
	          		<p class="name">{{item.name}}</p>
		          	<p class="brief">{{item.goods_brief}}</p>
		         	<p class="price">¥{{item.retail_price}}</p>
	          	</div>
          	</div>           	                   	
		</div>
		<p class="bottom" v-if="!more">我也是有底线的哦~</p>
    	<p class="bottom" v-else>加载中...</p>

	</div>
</template>

<script type="text/javascript">
import {post, get} from '@/util'
export default{
	data() {
		return {
			kinds:'', //不同种类的标识
			dataList:[], //某种类的商品列表信息
			info:[], //某类相对应的头部信息
			nowIndex:0, //当前进入的类别
			changecolor:'', //不同类别的不同class类，变换不同的样式
			page: 0, //分页功能中的当前page
			more:true //数据底部标志
		}
	},

	mounted() {
		this.dataList = []		
		this.nowIndex = 0
		this.changecolor = ''
		this.info = []
		//如果是从9.9区跳过来
		if(this.$root.$mp.query.id){
			this.getCheap(true)
			this.kinds = 'cheap'
		}else if(this.$root.$mp.query.isNew){			
			this.getNewgoods(true)
			this.kinds = 'new'
			// console.log("new:",this.$root.$mp.query.isNew)
		}else{
			this.getHotgoods(true)
			this.kinds = 'hot'
			// console.log("hot:",this.$root.$mp.query.isHot)
		}
	},
	methods: {
		//9.9区
		async getCheap(init){
			// 如果是从onshow进，将page设为0
			if(init){
				this.page = 0
				this.more = true
			}
			if(this.page ==0){
				this.dataList = []
			}
			const data = await get('/app/index/index',{page:this.page})
			this.info = data.cheapInfo[0]
			this.changecolor = 'cheap'
			this.nowIndex = 1	
			//将数据进行每12条拼接
			this.dataList = this.dataList.concat(data.cheapList)
			//如果数据小于12条并且page为0说明是最后一条数据
			if(data.cheapList.length < 10 && this.page>0){
				this.more = false
			}			
		},
		//新品首发
		async getNewgoods(init){
			// 如果是从onshow进将page设为0
			if(init){
				this.page = 0
				this.more = true
			}
			if(this.page ==0){
				this.dataList = []
			}
			const data = await get('/app/index/index',{page:this.page})
			this.info = data.newgoodsInfo[0]
			this.changecolor = 'newgoods'
			this.nowIndex = 1	
			//将数据进行每12条拼接
			this.dataList = this.dataList.concat(data.newgoodsList)
			//如果数据小于12条并且page为0说明是最后一条数据
			if(data.newgoodsList.length < 10 && this.page>0){
				this.more = false
			}
		},
		//人气精选
		async getHotgoods(init){
			// 如果是从onshow进将page设为0
			if(init){
				this.page = 0
				this.more = true
			}
			if(this.page ==0){
				this.dataList = []
				// console.log("page =0")
			}
			const data = await get('/app/index/index',{page:this.page})
			this.info = data.hotgoodsInfo[0]
			this.changecolor = 'hotgoods'
			this.nowIndex = 1
			//将数据进行每12条拼接
			this.dataList = this.dataList.concat(data.hotgoodsList)
			//如果数据小于12条并且page为0说明是最后一条数据
			if(data.hotgoodsList.length < 9 && this.page>0){
				this.more = false
			}		
		},
		//商品详情页
		goodsDetail (id) {
      		wx.navigateTo({
        		url: '/pages/goods/main?id=' + id
      		});
    	}
   	},

   	//分页加载
   	onReachBottom(){
		//如果没有数据时
		if(!this.more){
			return
		}
		this.page = this.page + 1
		setTimeout(() => {
			if(this.kinds == 'cheap'){
				this.getCheap()
			}else if(this.kinds == 'hot'){
				this.getHotgoods()
			}else{
				this.getNewgoods()
			}
    	}, 1000)				
	}
}
</script>
<!-- @import "./style.less"; -->
<style lang="scss">
@import "./index.scss"
</style>